<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Pet Homepage</title>

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/home.css}" rel="stylesheet">
    <link th:href="@{/fileinput/css/fileinput.min.css}" rel="stylesheet">
    <link th:href="@{/fileinput/css/font-awesome.min.css}" rel="stylesheet">
  </head>

  <body style="background-color: #ffffcc">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Pet Platform</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/api/home">HomeBanner
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/api/activity">PetActivity</a>
            </li>


            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span th:text="${session.adminEmail}">...</span>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="/logout">Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">

      <div class="row">

        <div class="col-lg-3">

          <h1 class="my-4">Admin</h1>

          <img style="width:200px" th:src="@{/img/1.png}" />
          <img style="margin-top:10px;width:200px" th:src="@{/img/2.png}" />


        </div>
        <!-- /.col-lg-3 -->
        <div class="col-lg-9">
          <div style="margin-top: 50px">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h2 class="panel-title">
                  Manage Home Banner
                </h2>
              </div>
              <div class="panel-body">
                <input id="input-fa" name="banner[]" multiple type="file" class="file" data-preview-file-type="text" >

              </div>
            </div>
          </div>
        </div>
        <!-- /.col-lg-9 -->

      </div>
      <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Pet Website 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script th:src="@{/jquery/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/fileinput/js/fileinput.min.js}"></script>
    <script th:src="@{/fileinput/js/theme.js}"></script>
    <script th:inline="javascript">
        $("#input-fa").fileinput({
            theme: "fa",
            uploadUrl: "/banner/upload",
            enctype:'multipart/form-data',
            uploadAsync:false,
            showCaption: false,
            showUpload: true,
            showPreview: true,
            overwriteInitial: true,
            previewFileIcon: '<i class="fa fa-file"></i>',
            initialPreviewAsData: true,
            preferIconicPreview: false,
            previewFileIconSettings: { // configure your icon file extensions
                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
                'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
                'png': '<i class="fa fa-file-photo-o text-primary"></i>',
                'jpeg': '<i class="fa fa-file-photo-o text-primary"></i>'
            },
            minFileCount:3,
            maxFileCount:3
        });

        $("#btn1").click(function(){
            $("#input-fa").fileinput('upload');
        });
    </script>
  </body>

</html>
